<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<title>栅格系统</title>
	
	<link rel="stylesheet"  href="__ROOT__/static/css/bootstrap.min.css" />
	<style>
.a{
height:50px;
width:200px;
border:1px solid #ccc;
background-color:#eee;

}

.b{
height:50px;
border:1px solid #ccc;
background-color:red;

}
	</style>
	
	</head>
<body>





<nav class="navbar navbar-default navbar-fixed-bottom"> <div class="container">

<div class="navbar-header">

<a href="#" class="navbar-brand">标题</a> </div>


<ul class="nav navbar-nav">

<li class="active"><a href="#">首页</a></li> <li><a href="#">资讯</a></li>
<li class="disabled"><a href="#">产品</a></li> <li><a href="#">关于</a></li>

</ul>
<!--套表单--->
<form action="" class="navbar-form navbar-right"> <div class="input-group">

<input type="text" class="form-control"> <span class="input-group-btn">

<button type="submit" class="btn btn-default">提交</button> </span>

</div>

</form>
<!--套表单--->

<button class="btn btn-default navbar-btn navbar-left">按钮</button>
<p class="navbar-text">我是一段文本<a href="#" class="navbar-link">---这是非导航链接---</a></p>
</div>

</nav>


<br/><br/>
<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">固定顶端导航 </p>
大的导航条，不需要设置body   navbar-fixed-top"固定在底部
<p>1</p><p>2</p><p>3</p><p>4</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>









	<script src="__ROOT__/static/js/jquery.min.js"></script>
	<script src="__ROOT__/static/js/bootstrap.min.js"></script>
</body>
</html>